<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">

<dom-module id="forest-question">
  <style>
    paper-radio-button.tried ::content #radioLabel {
      color: var(--error-color);
    }

    p {
      margin-bottom: 10px;
    }

    .explanation,
    :host.answered .question {
      display: none;
    }

    :host.answered .explanation {
      display: block;
    }
  </style>
  <template>
    <div class="question">
      <p>What is the primary cause of the pattern of forest change seen here?</p>
      <paper-radio-group
          id="choicesGroup"
          class="layout vertical"
          selected="{{selectedChoice_}}"
          allow-empty-selection >
        <template is="dom-repeat" items="{{choices_}}">
          <paper-radio-button name="{{item}}">{{item}}</paper-radio-button>
        </template>
      </paper-radio-group>
    </div>
    <div class="explanation">
      <p>That's right! {{correctChoice}}.</p>
      <p>{{explanation}}</p>
      <p><a href="{{learnMoreLink}}" target="_blank">Learn more.</a></p>
    </div>
  </template>
  <script src="forest-question.js"></script>
</dom-module>

